<template>
	<div class="swiper1 banner1-swiper tabs">
		<!-- 主体的滑动区 -->
		<ul class="swiper-wrapper">
			<li class="swiper-slide"  v-for="item in list" :key="item.id">
				<img :src="item.imgURL" >
				<p>{{item.word}}</p>
			</li>
			
		</ul>
	</div>
</template>

<script>
	// 引入vue周期函数
	// import{onMounted} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper'
	// 3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	
	export default{
		name:'Tabs',
		props:['propstabs'],
		data(){
			return{
				list:[
			
				],	
			}
		},
		watch:{
			propstabs(){
				this.list=this.propstabs
			}
		},
			updated(){ 
				 new Swiper('.banner1-swiper',{
				   // loop:true,
				   slidesPerView : 5,
				   slidesPerGroup : 5,
				 })
			} 
	}
</script>

<style scoped>
	.banner1-swiper{
		overflow: hidden;
	}
	.tabs ul{
		padding: 0.4rem 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tabs li {
		width: 20%;
		text-align: center;
	}
	.tabs ul li p{
		padding-top: 0.15rem;
		padding-bottom: 0.15rem;
	}
	.tabs ul li img{
		height: 0.8rem;
		width: 0.8rem;
	}
</style>
